<template>
  <div class="query-container animate__animated animate__fadeIn">
    <div class="background-shapes">
      <div class="shape shape1"></div>
      <div class="shape shape2"></div>
      <div class="shape shape3"></div>
    </div>

    <el-container>
      <el-aside width="300px" class="aside">
        <div class="aside-content">
          <div class="aside-header animate__animated animate__slideInDown">
            <h3>查询功能</h3>
          </div>
          <el-form :model="form" label-width="100px" class="query-form animate__animated animate__fadeInLeft">
            <el-form-item label="团队 ID">
              <el-input 
                v-model="form.teamId" 
                placeholder="请输入团队 ID" 
                clearable
                class="custom-input"
              ></el-input>
            </el-form-item>
            <el-space direction="vertical" alignment="center" :size="15" class="button-container">
              <el-button 
                type="primary" 
                @click="fetchTeamInfo" 
                class="query-button animate__animated animate__fadeIn"
              >查询团队信息</el-button>
              <el-button 
                type="primary" 
                @click="fetchTeamMembers" 
                class="query-button animate__animated animate__fadeIn"
              >查询团队成员</el-button>
              <el-button 
                type="primary" 
                @click="fetchProblemSelections" 
                class="query-button animate__animated animate__fadeIn"
              >查询选题信息</el-button>
              <el-button 
                type="primary" 
                @click="fetchFinalScore" 
                class="query-button animate__animated animate__fadeIn"
              >查询最终得分</el-button>
            </el-space>
          </el-form>
        </div>
      </el-aside>

      <el-main class="main animate__animated animate__fadeInRight">
        <div class="main-content">
          <h2 class="title">查询结果</h2>
          
          <div v-if="results.length === 0" class="no-data animate__animated animate__fadeIn">
            <el-empty description="暂无数据"></el-empty>
          </div>

          <div v-else class="result-container animate__animated animate__zoomIn">
            <el-table 
              :data="results" 
              style="width: 100%"
              class="custom-table"
              :stripe="true"
              :border="true"
              highlight-current-row
            >
              <el-table-column
                v-for="(key, index) in tableColumns"
                :key="index"
                :prop="key"
                :label="formatLabel(key)"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
// 引入必要的库
import { ref } from 'vue';
import { ElNotification } from 'element-plus';
import axios from '@/utils/request';
import 'animate.css';

// 定义响应式数据
const form = ref({
  teamId: ''
});
const results = ref([]);
const tableColumns = ref([]);

// 格式化列名为可读形式
const formatLabel = (key) => {
  return key.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
};

// 查询团队信息
const fetchTeamInfo = async () => {
  try {
    const response = await axios.get(`/select/team/info/${form.value.teamId}`);
    results.value = Array.isArray(response) ? response : [response];
    tableColumns.value = Object.keys(results.value[0] || {});
  } catch (error) {
    ElNotification({
      title: '查询失败',
      message: error.message,
      type: 'error',
    });
  }
};

// 查询团队成员信息
const fetchTeamMembers = async () => {
  try {
    const response = await axios.get(`/select/team/members/${form.value.teamId}`);
    results.value = Array.isArray(response) ? response : [response];
    tableColumns.value = Object.keys(results.value[0] || {});
  } catch (error) {
    ElNotification({
      title: '查询失败',
      message: error.message,
      type: 'error',
    });
  }
};

// 查询选题信息
const fetchProblemSelections = async () => {
  try {
    const response = await axios.get(`/select/team/problems/${form.value.teamId}`);
    results.value = Array.isArray(response) ? response : [response];
    tableColumns.value = Object.keys(results.value[0] || {});
  } catch (error) {
    ElNotification({
      title: '查询失败',
      message: error.message,
      type: 'error',
    });
  }
};

// 查询最终得分
const fetchFinalScore = async () => {
  try {
    const response = await axios.get(`/select/team/final-score/${form.value.teamId}`);
    results.value = Array.isArray(response) ? response : [response];
    tableColumns.value = Object.keys(results.value[0] || {});
  } catch (error) {
    ElNotification({
      title: '查询失败',
      message: error.message,
      type: 'error',
    });
  }
};
</script>

<style scoped>
.query-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow: hidden;
}

.background-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.shape {
  position: absolute;
  background: linear-gradient(45deg, rgba(66, 133, 244, 0.1), rgba(26, 115, 232, 0.1));
  border-radius: 50%;
}

.shape1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
}

.shape2 {
  width: 300px;
  height: 300px;
  bottom: -50px;
  left: -50px;
}

.shape3 {
  width: 200px;
  height: 200px;
  bottom: 50%;
  right: 30%;
}

.el-container {
  position: relative;
  z-index: 1;
  padding: 20px;
  height: 100vh;
}

.aside {
  background: transparent;
}

.aside-content {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  height: 100%;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.aside-header {
  background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%);
  color: white;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  text-align: center;
}

.query-form {
  padding: 20px;
}

.button-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

.query-button {
  width: 200px;
  background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%);
  border: none;
  height: 40px;
  transition: all 0.3s ease;
}

.query-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(26, 115, 232, 0.3);
}

.main {
  padding: 0 30px;
}

.main-content {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  height: 100%;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.title {
  color: #1a73e8;
  margin-bottom: 30px;
  font-size: 24px;
  text-align: center;
}

.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.result-container {
  margin-top: 20px;
}

.custom-table {
  background: transparent;
}

:deep(.el-table) {
  background: transparent !important;
}

:deep(.el-table th) {
  background: #1a73e8 !important;
  color: white;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: rgba(242, 245, 249, 0.5);
}

:deep(.el-table tr:hover > td) {
  background: rgba(26, 115, 232, 0.1) !important;
}

:deep(.el-input__wrapper) {
  box-shadow: none !important;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  transition: all 0.3s;
}

:deep(.el-input__wrapper:hover) {
  border-color: #1a73e8;
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2) !important;
}

:deep(.el-form-item) {
  margin-bottom: 30px;
}
</style>